<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="vm-group">
  <lv-form [formGroup]="formGroup" [lvLabelColon]="false" class="formGroup">
    <lv-form-item>
      <lv-form-label lvRequired>{{groupNameLabel}}</lv-form-label>
      <lv-form-control [lvErrorTip]="baseUtilService.nameErrorTip">
        <input lv-input type="text" formControlName="name" />
      </lv-form-control>
    </lv-form-item>

    <lv-form-item *ngIf="isVmwareGroup">
      <lv-form-label>
        {{'protection_select_vm_by_label' | i18n}}
        <i lv-icon="aui-icon-help" [lv-tooltip]="groupByHelpTpl"  lvTooltipPosition="right"
          class="configform-constraint" lvColorState='true'></i>
      </lv-form-label>
      <lv-form-control>
        <lv-radio-group formControlName="vmGroupMode" [lvGroupName]="'vmGroupModeGroup'">
          <lv-group [lvGutter]="'20px'">
            <lv-radio [lvValue]="dataMap.vmGroupType.manual.value" [lvDisabled]="!!rowData">
              {{ 'protection_select_manual_label' | i18n }}
            </lv-radio>
            <lv-radio [lvValue]="dataMap.vmGroupType.rule.value" [lvDisabled]="!!rowData">
              {{ 'protection_select_rules_label' | i18n }}
            </lv-radio>
          </lv-group>
        </lv-radio-group>
      </lv-form-control>
    </lv-form-item>

    <ng-container *ngIf="formGroup.value.vmGroupMode === dataMap.vmGroupType.rule.value; else elseTemplate">
      <lv-form-item>
        <lv-form-label>
          {{'protection_computer_location_label' | i18n}}
        </lv-form-label>
        <lv-form-control>
          <lv-select [lvOptions]='vCenterOptions' formControlName="selectedVCenter" lvValueKey="key" lvShowFilter
            lvFilterMode="contains" lvFilterKey='label' lvShowClear>
          </lv-select>
          <div [ngClass]="{'tree-container':treeData.length,'no-data':!treeData.length}">
            <lv-tree [lvData]="treeData" lvShowLine lvSelectionMode="single" [(lvSelection)]="treeSelection2" #resTree
              (lvExpandedChange)="expandedChange($event)" (lvCheck)="nodeCheck($event)" lvShowContentIcon>
            </lv-tree>
          </div>
        </lv-form-control>
      </lv-form-item>
      <aui-protect-filter [formGroup]="ruleFromGroup" [valid$]="selectValid$"
        [resType]="dataMap.Resource_Type.hostSystem.value">
      </aui-protect-filter>
    </ng-container>
    <ng-template #elseTemplate>
      <div style="margin-top:20px">
        <h2 style="margin-bottom:20px">
          {{'protection_select_resource_label' | i18n}}<i lv-icon="aui-icon-help"
            lv-tooltip="{{'protection_select_resource_tips_label' | i18n}}"
            class="configform-constraint" lvColorState="true"></i>
        </h2>
        <ng-container
          *ngIf="includes([dataMap.Resource_Type.virtualMachine.value,dataMap.Resource_Type.FusionCompute.value,dataMap.Resource_Type.cNwareVm.value, dataMap.Resource_Type.hyperVVm.value],subUnitType)">
          <lv-form-item>
            <lv-form-label>
              {{'protection_computer_location_label' | i18n}}
            </lv-form-label>
            <lv-form-control>
              <lv-select [lvOptions]='vCenterOptions' formControlName="selectedVCenter" lvValueKey="key" lvShowFilter
                lvFilterMode="contains" lvFilterKey='label'>
              </lv-select>
              <div [ngClass]="{'tree-container':treeData.length,'no-data':!treeData.length}">
                <lv-tree [lvData]="treeData" lvShowLine lvSelectionMode="single" [(lvSelection)]="treeSelection2"
                  #resTree (lvExpandedChange)="expandedChange($event)" (lvCheck)="nodeCheck($event)" lvShowContentIcon>
                </lv-tree>
              </div>
            </lv-form-control>
          </lv-form-item>
        </ng-container>
        <lv-form-item>
          <lv-form-label></lv-form-label>
          <lv-form-control>
            <lv-transfer #transfer [lvSourceColumns]="sourceColumns" [lvSourceData]="sourceData"
              [lvSourceSelection]="sourceSelection" [lvTargetColumns]="targetColumns"
              [lvTitles]="['common_optional_label' | i18n, 'common_selected_label' | i18n]"
              (lvStateChange)="stateChange($event)" (lvSelectionChange)="change($event)" lvAsync="true"
              [lvTotal]="total" [lvItemSize]="20" lvDataKey="uuid"></lv-transfer>
          </lv-form-control>
        </lv-form-item>
      </div>
    </ng-template>
  </lv-form>

  <ng-template #groupByHelpTpl>
    <span innerHTML="{{'protection_select_vm_by_help_label' | i18n}}"></span>
  </ng-template>
